<script setup>
import { onBeforeMount, ref, watch ,computed} from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

// pinia的使用
import { useAppStore } from '../stores/app';
import { toRefs } from 'vue';
const { langIndex } = toRefs(useAppStore());

import input from '../assets/data/input.json'
console.log(input);
const stepLable=computed(()=> {return Object.keys(input).map(key=>({label:input[key].lang[langIndex.value],to:input[key].to}))});
const installItems = ref(stepLable);

onBeforeMount(() => {
    // 监听路由变化
    watch(
        () => route.path,
        () => {
            console.log('route.path', route.path);
            if (route.path === '/steps/stepDemo1' || route.path === '/ehpcInstall') {
                isNext.value = false;
                isBack.value = true;
                nextOrArrange.value = 'next';
            } else if (route.path === '/steps/stepDemo2') {
                isNext.value = false;
                isBack.value = false;
                nextOrArrange.value = 'next';
            } else if (route.path === '/steps/stepDemo3') {
                isNext.value = false;
                isBack.value = false;
                nextOrArrange.value = 'next';
            } else if (route.path === '/steps/stepDemo4') {
                isNext.value = true;
                isBack.value = false;
                nextOrArrange.value = '部署';
            }
        }
    );
});

const nextOrArrange = ref('next');
const isNext = ref(route.path === '/steps/stepDemo4');
const isBack = ref(route.path === '/steps/stepDemo1' || route.path === '/ehpcInstall');

const handleNext = () => {
    if (route.path === '/steps/stepDemo1' || route.path === '/ehpcInstall') {
        router.push('/steps/stepDemo2');
    } else if (route.path === '/steps/stepDemo2') {
        router.push('/steps/stepDemo3');
    } else if (route.path === '/steps/stepDemo3') {
        router.push('/steps/stepDemo4');
    }
};

const handleBack = () => {
    if (route.path === '/steps/stepDemo4') {
        router.push('/steps/stepDemo3');
    } else if (route.path === '/steps/stepDemo3') {
        router.push('/steps/stepDemo2');
    } else if (route.path === '/steps/stepDemo2') {
        router.push('/steps/stepDemo1');
    }
};
const handleResetting = () => {
    router.push('/ehpcInstall');
}
</script>
<template>
    <div>
        <div class="card card-w-title h-30rem">
            <Steps :model="installItems" readonly:true />
            <div style="max-height: 300px; margin: 10px" class="overflow-auto"><router-view></router-view></div>
        </div>

        <!-- 底栏按钮功能 -->
        <div class="card flex flex-wrap gap-2 justify-content-end" style="padding: 10px">
            <Button label="重置" @click="handleResetting" severity="secondary" outlined />
            <Button label="返回" @click="handleBack()" :disabled="isBack" />
            <Button :label="nextOrArrange" @click="handleNext()" :disabled="isNext" />
        </div>
    </div>
</template>
